import 'package:cached_network_image/cached_network_image.dart';
import 'package:card_topia/common_model/Bind_card_model.dart';
import 'package:card_topia/common_widget/bottom_button.dart';
import 'package:card_topia/common_widget/my_app_bar.dart';
import 'package:card_topia/common_widget/touch_card.dart';
import 'package:card_topia/design_specifications.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

///卡片详情页

class BindCardPage extends StatefulWidget {
  const BindCardPage({super.key, required this.model});

  final BindCardModel model;

  @override
  State<BindCardPage> createState() => _CardDetailPageState();
}

class _CardDetailPageState extends State<BindCardPage> {
  String picUrl = "https://cdn.233.momobako.com/ygopro/pics/80071763.jpg";
  String picUrl2 =
      "https://gss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/6a63f6246b600c336488b44c1d4c510fd8f9a145.jpg";
  //是否展开详情
  bool _isExpanded = true;

  //是否被绑定
  bool isBind = true;
  @override
  Widget build(BuildContext context) {
    ///预加载图片
    precacheImage(NetworkImage(picUrl), context);
    precacheImage(NetworkImage(picUrl2), context);
    return Scaffold(
      // backgroundColor: themeColor,
      backgroundColor: const Color(0xff161519),
      body: Stack(
        children: [
          SingleChildScrollView(
            child: Column(
              children: [
                SizedBox(
                  height: MediaQuery.of(context).padding.top + 33.w,
                ),
                Center(
                  child: TouchCard(
                    cardWidth: MediaQuery.of(context).size.width - 128.w,
                    cardHeight:
                        (MediaQuery.of(context).size.width - 128.w) * (16 / 9),
                    frontChild: CachedNetworkImage(
                      imageUrl: picUrl,
                      width: MediaQuery.of(context).size.width - 160.w,
                    ),
                    backChild: CachedNetworkImage(
                      imageUrl: picUrl2,
                      width: MediaQuery.of(context).size.width - 160.w,
                    ),
                  ),
                ),
                SizedBox(
                  height: 24.w,
                ),
                Container(
                  margin: EdgeInsets.only(left: 16.w, right: 16.w),
                  alignment: Alignment.centerLeft,
                  child: Row(
                    children: [
                      Container(
                        height: 26.w,
                        width: 26.w,
                        alignment: Alignment.center,
                        child: Image.asset(
                          "assets/safe_check.png",
                          width: 32.w,
                          fit: BoxFit.fitWidth,
                        ),
                      ),
                      SizedBox(
                        width: 8.w,
                      ),
                      Expanded(
                          child: Text(
                        "魔人 暗黑护持师",
                        style: TextStyle(
                            fontSize: 20.sp,
                            fontWeight: FontWeight.bold,
                            fontFamily: harmony,
                            color: Colors.white),
                      )),
                      Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(4.w),
                            color: themeColor
                            // border: Border.all(color: Colors.white)
                            ),
                        padding: EdgeInsets.symmetric(
                            horizontal: 6.w, vertical: 2.w),
                        child: Text(
                          "SSSR",
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 16.sp,
                              fontWeight: FontWeight.bold),
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: 2.w,
                ),
                //编号
                Container(
                  margin: EdgeInsets.only(left: 48.w),
                  alignment: Alignment.centerLeft,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Container(
                        decoration:
                            BoxDecoration(border: Border.all(color: descColor)),
                        padding: EdgeInsets.symmetric(
                            horizontal: 4.w, vertical: 1.w),
                        child: Row(
                          children: [
                            Text(
                              "ID:",
                              style: TextStyle(
                                  fontFamily: harmony,
                                  fontSize: 10.sp,
                                  color: descColor),
                            ),
                            Text(
                              "29387651",
                              style: TextStyle(
                                  fontFamily: harmony,
                                  fontSize: 10.sp,
                                  color: descColor),
                            ),
                          ],
                        ),
                      ),
                      const Spacer()
                    ],
                  ),
                ),
                //持有者
                if(isBind)
                  Container(
                    width: double.infinity,
                    margin: EdgeInsets.only(top: 16.w,left: 16.w,right: 16.w),
                    decoration: BoxDecoration(
                      color: Color(0xff222125),
                      borderRadius: BorderRadius.circular(8.w)
                    ),
                    padding: EdgeInsets.only(top: 12.w,bottom: 16.w),
                    child: Column(
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Container(width: 32.w,height: 1.w,color: themeColor,),
                            Image.asset("assets/verify_left.png",width: 16.w,),
                            SizedBox(width: 12.w,),
                            Text("持有者",style: TextStyle(fontSize: 14.sp,color: disableColor,fontFamily: harmony,),),
                            SizedBox(width: 12.w,),
                            Image.asset("assets/verify_right.png",width: 16.w,),
                            Container(width: 32.w,height: 1.w,color: themeColor,),
                          ],
                        ),
                        SizedBox(height: 24.w,),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Image.asset("assets/verify_user_left.png",height: 72.w,),
                            Container(
                              padding: EdgeInsets.symmetric(horizontal: 12.w),
                              child: CircleAvatar(
                                backgroundImage: CachedNetworkImageProvider(
                                  "https://pic1.zhimg.com/88115350429e623c47ddc578a648c835_xl.jpg?source=32738c0c",
                                ),
                                radius: 42.w,
                              ),
                            ),
                            Image.asset("assets/verify_user_right.png",height: 72.w,),
                          ],
                        ),
                        SizedBox(height: 16.w,),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            SizedBox(width: 48.w,),
                            Text("半斤水泥",style: TextStyle(fontSize: 18.sp,color: Colors.white,fontFamily: harmony),),
                            Container(
                              width: 40.w,
                              height: 16.w,
                              decoration: BoxDecoration(
                                  color: Color(0xFFFFAB1B),
                                  borderRadius: BorderRadius.circular(10)
                              ),
                              alignment: Alignment.center,
                              margin: EdgeInsets.only(left: 8.w),
                              child: Text("Lv.21",style: TextStyle(color: textColor,fontWeight: FontWeight.bold,fontFamily: harmony,fontSize: 12.sp),),
                            )
                          ],
                        )

                      ],
                    ),
                  ),
                SizedBox(
                  height: 16.w,
                ),
                Container(
                  decoration: BoxDecoration(
                    color: const Color(0xff222125),
                    borderRadius: BorderRadius.circular(8.w),
                  ),
                  margin: EdgeInsets.symmetric(horizontal: 16.w),
                  padding: EdgeInsets.only(left: 16.w, bottom: 8.w),
                  child: ExpansionPanelList(
                    elevation: 0,
                    expandedHeaderPadding: const EdgeInsets.all(0),
                    expansionCallback: (a,b){
                      _isExpanded = !_isExpanded;
                      setState(() {

                      });
                    },
                    expandIconColor: descColor,
                    children: [
                      ExpansionPanel(
                        headerBuilder: (context, a) {
                          // return ExpansionTile(title: Text("JOJO"),trailing: Container(),);
                          return _detailTitle(a);
                        },
                        backgroundColor: Colors.transparent,
                        canTapOnHeader: false,
                        isExpanded: _isExpanded,
                        body: Column(
                          children: [
                            _DetailItem(title: "介绍", content: "融合召唤这只怪兽，必须用上面所写的卡融合召唤。通常魔法发动时支付1000分，那个通常魔法的效果无效化。这张卡战斗破坏的效果怪兽的效果无效化。"),
                            _DetailItem(title: "生产日期", content: "2020-09-01"),
                            _DetailItem(title: "已绑定",content:"23"),
                            _DetailItem2(title: Row(
                              children: [
                                Text("已发售",style: TextStyle(color: disableColor,fontSize: 14.sp,fontFamily: harmony),),
                                SizedBox(width: 8.w,),
                                Container(
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(4.w),
                                      border: Border.all(color: descColor)
                                  ),
                                  padding: EdgeInsets.only(left: 4.w,right: 4.w,bottom: 1.w),
                                  child: Text("告罄",style: TextStyle(color: descColor,fontSize: 10.sp),),
                                )
                              ],
                            ),
                              content: "20021",
                            ),
                            _DetailItem(title: "未发售",content:"0"),
                            _DetailItem(title: "发行商",contentChild: Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: [
                                Container(
                                  child: CachedNetworkImage(imageUrl: "https://www.kayou110.com/NewWeb/img//index/logo.png",height: 18.w,),
                                ),
                                Text("卡游(上海)传播有限公司",style: TextStyle(fontSize: 14.sp,fontFamily: harmony,color: descColor),)
                              ],
                            ),),

                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  height: 16.w,
                ),
                if(isBind)
                  SizedBox(height: 33.w,)
              ],
            ),
          ),
          ///AppBar
          const Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: CustomAppBar(
                showLeading: true,
                isDark: true,
              ))
        ],
      ),
      bottomNavigationBar: (){
          if(!isBind) {
            return BottomAppBar(
            color: Colors.transparent,
            elevation: 0,
            child: Container(
              margin: EdgeInsets.symmetric(horizontal: 16.w),
              child: const BottomButton(
                text: "立即绑定",
                enable: true,
              ),
            ),
          );
          }
      }()

    );
  }
  //卡片详情头部
  _detailTitle(bool open){
    return InkWell(
      onTap: (){
        setState(() {
          _isExpanded = !_isExpanded;
        });
      },
      child: Row(
        children: [
          Container(
            height: 16.w,
            width: 4.w,
            color: themeColor,
          ),
          SizedBox(
            width: 8.w,
          ),
          Text(
            "卡片详情",
            style: TextStyle(
                fontSize: 16.sp,
                color: Colors.white,
                fontFamily: harmony),
          ),
          const Spacer(),
          Text(
            open?"收起":"展开",
            style: TextStyle(
                fontSize: 12.sp,
                color: descColor,
                fontFamily: harmony),
          ),
          // Icon(
          //   open?Icons.keyboard_arrow_up_rounded:Icons.keyboard_arrow_down_rounded,
          //   color: descColor,
          //   size: 16.w,
          // )
        ],
      ),
    );
  }
}

///详情子项
class _DetailItem extends StatelessWidget {
  const _DetailItem({super.key, required this.title, this.content, this.contentChild}):assert(content!=null||contentChild!=null);

  final String title;
  final String? content;
  final Widget? contentChild;
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.centerLeft,
      margin: EdgeInsets.symmetric(vertical: 8.w),
      padding: EdgeInsets.only(right: 16.w),
      child: Row(
        crossAxisAlignment: contentChild==null?CrossAxisAlignment.start:CrossAxisAlignment.center,
        children: [
          Text(
            title,
            style: TextStyle(
                fontFamily: harmony, fontSize: 14.sp, color: disableColor),
          ),
          SizedBox(width: 60.w,),
          content==null?Expanded(
            child: Container(
              alignment: Alignment.centerRight,
              child: contentChild,
            ),
          ):Expanded(
            child: Container(
              alignment: Alignment.centerRight,
              child: Text(
                content!,
                style: TextStyle(
                    fontFamily: harmony, fontSize: 14.sp, color: descColor),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
///详情子项2
class _DetailItem2 extends StatelessWidget {
  const _DetailItem2({required this.title, required this.content});

  final Widget title;
  final String content;
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.centerLeft,
      margin: EdgeInsets.symmetric(vertical: 8.w),
      padding: EdgeInsets.only(right: 16.w),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          title,
          SizedBox(width: 60.w,),
          Expanded(
            child: Container(
              alignment: Alignment.centerRight,
              child: Text(
                content,
                style: TextStyle(
                    fontFamily: harmony, fontSize: 14.sp, color: descColor),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
